import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { notFound } from "next/navigation";

import { revalidatePath } from "next/cache";

import { VIDEO_PLATFORM } from "@stepping/types";

import { serverCaller } from "@/lib/trpc/server";

import { VideoEmbed } from "@/components/video-embed";

export const dynamic = "force-dynamic";

const PLATFORM_LABEL: Record<string, string> = {

  youtube: "YouTube",

  instagram: "Instagram",

  tiktok: "TikTok",

  other: "Other",

};

function youtubeId(url: string): string | null {

  try {

    const u = new URL(url);

    const host = u.hostname.replace(/^www\./, "");

    if (host === "youtu.be") {

      const id = u.pathname.slice(1);

      return /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : null;

    }

    if (host === "youtube.com" || host === "m.youtube.com") {

      if (u.pathname === "/watch") {

        const id = u.searchParams.get("v");

        return id && /^[a-zA-Z0-9_-]{11}$/.test(id) ? id : null;

      }

      const embed = u.pathname.match(/^\/(?:embed|shorts)\/([a-zA-Z0-9_-]{11})/);

      if (embed) return embed[1];

    }

    return null;

  } catch {

    return null;

  }

}

export default async function VideosPage({

  params,

}: {

  params: Promise<{ slug: string }>;

}) {

  const { slug } = await params;

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const videos = await caller.video.list({ cityId: city.id });

  async function addVideo(formData: FormData) {

    "use server";

    const title = String(formData.get("title") ?? "").trim();

    const embedUrl = String(formData.get("embedUrl") ?? "").trim();

    const platform = String(formData.get("platform") ?? "other");

    if (!title || !embedUrl) return;

    await serverCaller().video.create({

      cityId: city!.id,

      title,

      embedUrl,

      platform: platform as (typeof VIDEO_PLATFORM)[number],

    });

    revalidatePath(`/city/${slug}/videos`);

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href={`/city/${slug}`} className="kicker hover:text-gold">

        ← {city.name}

      </Link>

      <p className="kicker mt-10 text-ash">

        Tapes · {city.metroLabel}

      </p>

      <h1 className="display mt-3 text-7xl sm:text-8xl">The Tape</h1>

      <p className="serif mt-5 max-w-xl text-xl text-ash">

        Sets, classes, and footwork caught on camera across {city.name}.

      </p>

      {}

      <section className="mt-14 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">Add a clip</h2>

          <span className="kicker">Add to the tape</span>

        </div>

        <form action={addVideo} className="mt-6 flex flex-col gap-3">

          <input

            name="title"

            required

            placeholder="Clip title (e.g. Saturday Night Set 2025)"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="embedUrl"

            required

            type="url"

            placeholder="Video URL (e.g. https://youtu.be/…)"

            className="serif border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2 flex flex-wrap gap-4">

            <select

              name="platform"

              defaultValue="youtube"

              className="kicker border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none focus:border-gold"

            >

              {VIDEO_PLATFORM.map((p) => (

                <option key={p} value={p} className="bg-stage">

                  {(PLATFORM_LABEL[p] ?? p).toUpperCase()}

                </option>

              ))}

            </select>

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Add clip

            </button>

          </div>

        </form>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <h2 className="display text-3xl">The Reel</h2>

          <span className="kicker text-ash">

            {String(videos.length).padStart(2, "0")} clips

          </span>

        </div>

        {videos.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Clips will appear here as the community adds them. Add the first

            one above.

          </p>

        ) : (

          <ul className="mt-8 flex flex-col gap-12">

            {videos.map((v, i) => {

              const ytId =

                v.platform === "youtube" ? youtubeId(v.embedUrl) : null;

              return (

                <li key={v.id}>

                  <div className="flex items-end justify-between gap-5">

                    <div className="flex items-end gap-5">

                      <span className="kicker w-8 text-gold">

                        {String(i + 1).padStart(2, "0")}

                      </span>

                      <h3 className="display text-2xl sm:text-3xl">{v.title}</h3>

                    </div>

                    <span className="kicker border border-[var(--line)] px-3 py-1">

                      {(PLATFORM_LABEL[v.platform] ?? v.platform).toUpperCase()}

                    </span>

                  </div>

                  {ytId ? (

                    <div className="mt-5">

                      <VideoEmbed id={ytId} title={v.title} />

                    </div>

                  ) : null}

                  <a

                    href={v.embedUrl}

                    target="_blank"

                    rel="noopener noreferrer"

                    className="kicker mt-5 inline-block text-gold hover:text-gold-bright"

                  >

                    Watch →

                  </a>

                </li>

              );

            })}

          </ul>

        )}

      </section>

      <SiteFooter />

    </main>

  );

}